<template>
    <div class="app-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="列表" name="list">
                <list class="list" ref="list" @goDetail="goDetail" />
            </el-tab-pane>
            <el-tab-pane label="详情" name="detail" :disabled="detailDisabled">
                <detail v-if="reload" class="detail" :query="query" ref="detail" @getList="getList" @goDetail="goDetail" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import list from './list.vue'
import detail from './detail.vue'
export default {
    data() {
        return {
            activeName: 'list',
            reload: false,
            fullPath: '',   // 记录页面名称，防止重复使用改页面时会重复触发路由监听
            detailDisabled: true,  // 是否禁用详情页按钮
            workFlowDisabled: true,  // 是否禁用工作流按钮
            initPage: true,    // 是否第一次进入页面
            query: {}
        }
    },
    components: {
        list,
        detail
    },
    watch: {
        activeName(val) {
            if (this.activeName == 'detail') {
                this.detailDisabled = false
            } else if (this.activeName == 'list') {
                // 为了重新调整表格高度
                this.$refs.list.$forceUpdate()
            }
        }
    },
    methods: {
        loadData() {
            // 切换到详情页
            this.reload = true
            this.activeName = 'detail'
        },
        // 新增
        goDetail(data = {}) {
            this.query = data
            this.loadData()
        },
        // 刷新列表页
        getList() {
            this.$nextTick(() => {
                this.$refs.list.getList()
            })
        },
        handleClick() {
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    /deep/ .el-tabs {
        height: 100%;

        .el-tabs__item {
            padding: 0 15px 0 0 !important;
        }

        .el-tabs__content {
            height: calc(100% - 55px);
        }

        .el-tab-pane {
            height: 100%;
        }
    }

    .list {
        height: 100%;


    }

    ::v-deep .el-card__body {
        padding: 7px 0;
    }

    .detail {
        height: 100%;
        // ::v-deep .el-card__body {
        //     padding: 7px 0;
        // }
    }
}
</style>
